<template>
	<view>
		<view class="px-25 py-3 flex align-center justify-between border-bottom">
			<view class="font28 font-weight-500">考勤时间</view>
			<view class="font28" @click="open()">{{dateTime}}</view>
		</view>
		<view class="pl-3">
			<view class="color333 font30 font-weight-bold mb-3 pb-0 pt-2">未到校学生({{outlistNum}}人)</view>
			<view class="flex flex-wrap">
				<view class="text-center mb-3 mr-3" style="width: 210rpx;" v-for="(item, index) in outlist"
					:key="index">
					<!-- <image src="../../../static/img/ic_default_head.png" class="rounded-circle"
						style="width: 100rpx;height: 100rpx;"
						v-if="item.head_pic == 'http://api.sxxat.cn:443' || item.head_pic == 'http://api.sxxat.cn:443null' || item.head_pic == 'http://localhost:8888'|| item.head_pic == 'http://localhost:8888null'"
						mode=""></image>
					<image :src="item.head_pic" class="rounded-circle" style="width: 100rpx;height: 100rpx;" v-else
						mode=""></image> -->
					<view class="font-weight-500 overflow-hidden font26 colorfff stu stuout">{{ item.vcName }}</view>
				</view>
			</view>
			<view class="color333 font30 font-weight-bold mb-3 pb-0 pt-2">已到校学生({{intlistNum}}人)</view>
			<view class="flex flex-wrap">
				<view class="text-center mb-3 mr-3" style="width: 210rpx;" v-for="(item, index) in intlist"
					:key="index">
					<!-- <image src="../../../static/img/ic_default_head.png" class="rounded-circle"
						style="width: 100rpx;height: 100rpx;"
						v-if="item.head_pic == 'http://api.sxxat.cn:443' || item.head_pic == 'http://api.sxxat.cn:443null' || item.head_pic == 'http://localhost:8888'|| item.head_pic == 'http://localhost:8888null'"
						mode=""></image>
					<image :src="item.head_pic" class="rounded-circle" style="width: 100rpx;height: 100rpx;" v-else
						mode=""></image> -->
					<view class="font-weight-500 overflow-hidden font26 colorfff  stu stuint">{{ item.vcName }}</view>
				</view>
			</view>
		</view>
		<!-- <u-calendar :show="show" :mode="mode" @close="show=false" @confirm="confirm"></u-calendar> -->
		<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
	</view>
</template>

<script>
	import moment from "moment"
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				show: false,
				mode: 'single',
				dateTime: "",
				outlist: [],
				intlist: [],
				intlistNum: 0,
				outlistNum: 0
			};
		},
		onLoad() {
			this.dateTime = moment().format('YYYY-MM-DD');
			this.getData()
		},
		methods: {
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.dateTime = e.fulldate
			},
			getData() {
				let _this = this;
				let opts = {
					url: 'xskq/searchKqByClassId.shtml',
				};
				let param = {
					class_id: uni.getStorageSync('class_id'),
					time: _this.dateTime
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						_this.intlist = res.data.is_true;
						_this.outlist = res.data.is_false;
						_this.intlistNum = res.data.is_true.length;
						_this.outlistNum = res.data.is_false.length;
					},
					error => {
						console.log(error);
					}
				);
			},
		}
	}
</script>

<style lang="scss">
	.u-calendar {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;

	}

	.stu {
		width: 100%;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 60rpx;
	}

	.stuint {
		background-color: #F17F22;
	}

	.stuout {
		background-color: #6393F4;
	}
</style>
